<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-04 11:41:30
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-04-24 11:13:04
 * @FilePath: \mould\src\components\public\pdf-dialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pdf Control-2">
    <el-dialog
      top="4vh"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      element-loading-spinner="el-icon-loading"
      class="pdfDialog"
      append-to-body
      v-dialogDrag
      :title="fFileName"
      :visible.sync="dialogPdf"
      @close="closeDialog"
    >
      <div
        :style="{ height: '800px' }"
     
      >
        <!-- <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe> -->
        <embed
          :src="`${pdfUrl}#toolbar=0`"
          hidden="false"
          type="application/pdf"
          height="100%"
          width="100%"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["dialogVisible", "fileDetail"],
  data() {
    return {
      // 附件名称
      fFileName: null,
      // 附件地址
      pdfUrl: null,
      // 附件展示
      dialogPdf: false,
      loading: true,
    };
  },
  watch: {
    fileDetail: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal) {
          console.log(11, newVal);
          this.pdfUrl = newVal.url;
          this.fFileName = newVal.fFileName;
          this.loading = false;
        }
      },
      immediate: true,
    },
    dialogVisible: {
      handler(newVal) {
        if (newVal) {
          console.log(newVal);
          this.dialogPdf = this.dialogVisible;
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.dialogPdf = this.dialogVisible;
  },
  methods: {
    closeDialog() {
      console.log(this.dialogPdf);
      this.$emit("closes");
    },
  },
};
</script>
<style scoped></style>
